<template>
    <div class="node-wrap"
        v-if="nodeConfig?.type === FlowNodeTypeEnum.Audit || nodeConfig?.type === FlowNodeTypeEnum.Copy">
        <div class="node-wrap-box">
            <el-card shadow="hover" :body-style="{ backgroundColor: '#fff' }"
                :class="nodeConfig.type == FlowNodeTypeEnum.Audit ? 'audioColor' : 'copyColor'">
                <template #header>
                    <el-input v-if="isInput" type="text" class="editable-title-input" @blur="blurEvent(null)"
                        @focus="$event.currentTarget.select()" v-model="nodeConfig.nodeName" />
                    <span v-else class="editable-title" style="color: white" @click="clickEvent(null)">{{
                        nodeConfig.nodeName }}</span>
                    <div class="type_img">
                        <img v-if="nodeConfig.type == FlowNodeTypeEnum.Audit"
                            src="/@/assets/images/easyFlow/audit.png" />
                        <img v-if="nodeConfig.type == FlowNodeTypeEnum.Copy" src="/@/assets/images/easyFlow/copy.png" />
                    </div>
                    <el-icon class="el-input__icon anticon close" @click="deleteNode">
                        <ele-CloseBold />
                    </el-icon>
                </template>
                <div class="content" @click="setPerson">
                    <div class="text">
                        <span class="placeholder">请选择</span>
                    </div>
                    <el-icon class="el-input__icon anticon arrow">
                        <ele-Setting />
                    </el-icon>
                </div>
            </el-card>
        </div>
        <addNode v-model:childNode="nodeConfig.childNode" :node="nodeConfig" />
    </div>
    <div class="branch-wrap" v-if="nodeConfig?.type === FlowNodeTypeEnum.Route">
        <div class="branch-box-wrap">
            <div class="branch-box">
                <button class="add-branch" @click="addCondition">
                    添加条件
                    <!-- <img src="/@/assets/images/easyFlow/addCondition.png" /> -->
                </button>
                <div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
                    <div class="condition-node">
                        <div class="condition-node-box">
                            <el-badge :offset="[-230, 0]"
                                :value="item.isDefault ? '最低优先级' : '优先级' + item.priorityLevel">
                                <div class="auto-judge">
                                    <!--调整优先级 <div class="sort-left" v-if="index != 0" @click="arrTransfer(index, -1)">&lt;</div> -->
                                    <el-card shadow="hover" class="conditionColor"
                                        :body-style="{ 'height': '60px', padding: '15px 20px', backgroundColor: '#fff' }">
                                        <template #header>
                                            <el-input v-if="isInputList[index]" class="editable-title-input" type="text"
                                                @blur="blurEvent(index)" @focus="$event.currentTarget.select()"
                                                v-model="item.nodeName" />
                                            <span v-else class="editable-title" style="color: black"
                                                @click="clickEvent(index)">{{
                                                    item.nodeName }}</span>
                                            <div class="type_img">
                                                <img src="/@/assets/images/easyFlow/condition1.png" />
                                            </div>
                                            <el-icon v-if="!item.isDefault" class="el-input__icon anticon close"
                                                @click="deleteCondition(index)">
                                                <ele-CloseBold />
                                            </el-icon>
                                        </template>
                                        <!--调整优先级 <div class="sort-right" v-if="index != nodeConfig.conditionNodes.length - 1" @click="arrTransfer(index)"> &gt;</div> -->
                                        <div @click="setPerson(item.priorityLevel)">
                                            {{ $func.conditionStr(nodeConfig, index) }}
                                        </div>
                                    </el-card>
                                </div>
                            </el-badge>
                            <addNode v-model:childNode="item.childNode" />
                        </div>
                    </div>
                    <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
                    <template v-if="index == 0">
                        <div class="top-left-cover-line"></div>
                        <div class="bottom-left-cover-line"></div>
                    </template>
                    <template v-if="index == nodeConfig.conditionNodes.length - 1">
                        <div class="top-right-cover-line"></div>
                        <div class="bottom-right-cover-line"></div>
                    </template>
                </div>
            </div>
            <addNode v-model:childNode="nodeConfig.childNode" />
        </div>
    </div>
    <div class="branch-wrap" v-if="nodeConfig?.type === FlowNodeTypeEnum.Idea">
        <div class="branch-box-wrap">
            <div class="branch-box" style="margin-top:0px">
                <div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
                    <div class="condition-node">
                        <div class="condition-node-box">
                            <div class="auto-judge">
                                <el-card shadow="hover"
                                    :body-style="{ 'height': '60px', padding: '15px 20px', 'text-align': 'center' }">
                                    <template #header>
                                        <el-icon class="el-input__icon anticon close" @click="deleteCondition(index)">
                                            <ele-CloseBold />
                                        </el-icon>
                                        <span>{{ item.nodeName }}</span>
                                        <div class="type_img">
                                            <el-icon v-if="item.type == FlowNodeTypeEnum.Agree" size="30"
                                                color="#67c23a"><ele-CircleCheckFilled /></el-icon>
                                            <el-icon v-if="item.type == FlowNodeTypeEnum.NoAgree" size="30"
                                                color="#909399"><ele-CircleCloseFilled /></el-icon>
                                        </div>
                                    </template>
                                    <el-tag v-if="item.type == FlowNodeTypeEnum.Agree" effect="dark"
                                        type="success">审批通过</el-tag>
                                    <el-tag v-else effect="dark" type="info">审批不通过</el-tag>
                                </el-card>
                            </div>
                            <addNode v-model:childNode="item.childNode" />
                        </div>
                    </div>
                    <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
                    <template v-if="index == 0">
                        <div class="top-left-cover-line"></div>
                        <div class="bottom-left-cover-line"></div>
                    </template>
                    <template v-if="index == nodeConfig.conditionNodes.length - 1">
                        <div class="top-right-cover-line"></div>
                        <div class="bottom-right-cover-line"></div>
                    </template>
                </div>
            </div>
            <addNode v-model:childNode="nodeConfig.childNode" />
        </div>
    </div>
    <nodeWrap v-if="nodeConfig?.childNode" v-model:nodeConfig="nodeConfig.childNode" />
</template>
<script setup lang="ts">
import { ref, watch, getCurrentInstance } from "vue";
import $func from "/@/api-services/workflow/model/index";
import addNode from './addNode.vue'
import { FlowNodeTypeEnum } from '/@/enums/workFlowEnum';
import { WorkFlowNode } from '/@/types/workflow';
import { sort } from '/@/utils/arrayOperation';
import { uuid } from '/@/utils/uuid';

const nodeConfig = defineModel<Nullable<WorkFlowNode>>('nodeConfig');
let isInputList = ref<boolean[]>([]);
let isInput = ref(false);

//修改输入框
const clickEvent = (index: any) => {
    if (index || index === 0) {
        isInputList.value[index] = true;
    } else {
        isInput.value = true;
    }
};

//输入框修改完成
const blurEvent = (index) => {
    if (nodeConfig.value) {
        if (index || index === 0) {
            isInputList.value[index] = false;
            nodeConfig.value.conditionNodes[index].nodeName = nodeConfig.value.conditionNodes[index].nodeName || "条件";
        } else {
            isInput.value = false;
            nodeConfig.value.nodeName = nodeConfig.value.nodeName || "流程";
        }
    }
};

//删除节点
const deleteNode = () => {
    if (nodeConfig.value?.childNode) {
        //移除审批时移除审批意见
        if (nodeConfig.value.type == FlowNodeTypeEnum.Audit && nodeConfig.value.childNode.type == FlowNodeTypeEnum.Idea) {
            nodeConfig.value = nodeConfig.value.childNode?.childNode;
        } else {
            nodeConfig.value = nodeConfig.value.childNode;
        }
    } else {
        nodeConfig.value = null;
    }
};

//添加条件
const addCondition = () => {
    if (nodeConfig.value) {
        let conditionLenth = nodeConfig.value.conditionNodes.length;
        let length = conditionLenth + 1;
        nodeConfig.value.conditionNodes.push(new WorkFlowNode(uuid(), '', "条件" + length, FlowNodeTypeEnum.Condition, null, [], length));

        //更新默认条件优先级
        nodeConfig.value.conditionNodes?.filter(x => !x.isDefault).forEach((condition, index) => {
            condition.priorityLevel = index + 1;
        });

        nodeConfig.value.conditionNodes?.filter(x => x.isDefault).forEach((condition, index) => {
            condition.priorityLevel = conditionLenth + 1;
        });

        sort(nodeConfig.value.conditionNodes, 'priorityLevel');
    }
};

///删除条件
const deleteCondition = (index) => {
    nodeConfig.value?.conditionNodes.splice(index, 1);
    nodeConfig.value?.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1;
    });

    if (nodeConfig.value?.conditionNodes == null || nodeConfig.value.conditionNodes.length == 0) {
        nodeConfig.value = null;
    }

    if (nodeConfig.value?.conditionNodes.length == 1) {
        if (nodeConfig.value.childNode) {
            if (nodeConfig.value.conditionNodes[0].childNode) {
                reData(nodeConfig.value.conditionNodes[0].childNode, nodeConfig.value.childNode);
            } else {
                nodeConfig.value.conditionNodes[0].childNode = nodeConfig.value.childNode;
            }

            nodeConfig.value = nodeConfig.value.conditionNodes[0].childNode;
        }
    }
};

const reData = (data, addData) => {
    if (!data.childNode) {
        data.childNode = addData;
    } else {
        reData(data.childNode, addData);
    }
};

const setPerson = (priorityLevel) => {

};
const arrTransfer = (index, type = 1) => {
    //向左-1,向右1
    if (nodeConfig.value) {
        nodeConfig.value.conditionNodes[index] = nodeConfig.value.conditionNodes.splice(
            index + type,
            1,
            nodeConfig.value.conditionNodes[index]
        )[0];
        nodeConfig.value.conditionNodes.map((item, index) => {
            item.priorityLevel = index + 1;
        });
    }
};
</script>

<style lang="scss" scoped>
.el-card {
    :deep(.el-card__body) {
        padding: 0;
    }
}

.type_img {
    right: 20px;
    top: 12px;
    position: absolute;
}

.audioColor {
    background-image: linear-gradient(90deg, #409eff -16.37%, #9080af 137.34%);
}

.copyColor {
    background-image: linear-gradient(90deg, #2d314b -16.37%, #909399 137.34%);
}

.conditionColor {
    background-image: linear-gradient(90deg, #e9e9e9 -16.37%, #ffffff 137.34%);
}
</style>